<template>
    <div class="heading-users">
        <!--    系统用户搜索和新增    -->
        <el-row class="heading-users-search-and-new" >
            <!--    查询用户功能  -->
            <el-col :span="16">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="用户登录账号" value="user_id"></el-option>
                        <el-option label="用户邮箱" value="user_email"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                </el-input>
            </el-col>
            <!--    新增用户功能  -->
            <el-col :span="4" :offset="2">
                <el-button type="primary" icon="el-icon-edit" @click="newUser">新建</el-button>
                <el-dialog title="新增用户" :visible.sync="newUserFormVisible" style="width: 60%;margin-left: 20%">
                    <el-form
                            :model="userForm"
                            ref="userForm"
                            label-width="120px"
                            class="heading-user-form"
                    >
                        <el-form-item label="用户账号" prop="id">
                            <el-input v-model="userForm.id" autocomplete="off" maxlength="10" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="用户密码" prop="password">
                            <el-input v-model="userForm.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户邮箱" prop="email">
                            <el-input v-model="userForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户角色" prop="role">
                            <el-input v-model.number="userForm.role" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="user-footer">
                        <el-button @click="newUserFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitUserForm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
        <!--    用户信息列表  -->
        <el-table :data="usersData" style="width: 100%;margin-top: 10px">
            <el-table-column label="用户账号" prop="user_id"></el-table-column>
            <el-table-column label="用户邮箱" prop="user_email"></el-table-column>
            <el-table-column label="用户角色" prop="user_role"></el-table-column>
            <el-table-column label="用户创建时间" prop="user_create_time"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <!--    修改用户信息  -->
                    <el-button size="mini" @click="userEdit(props.$index, props.row)">修改</el-button>
                    <el-dialog title="修改用户信息" :visible.sync="changeUserFormVisible" style="width: 60%;margin-left: 20%">
                        <el-form :model="changeUserForm">
                            <el-form-item label="用户信息的类别">
                                <el-select v-model="changeUserForm.type" placeholder="请选择修改的用户信息类别">
                                    <el-option label="系统用户账号" value="user_id"></el-option>
                                    <el-option label="系统用户密码" value="user_password"></el-option>
                                    <el-option label="系统用户邮箱" value="user_email"></el-option>
                                    <el-option label="用户创建时间" value="user_create_time"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改的信息">
                                <el-input
                                        v-model="changeUserForm.input"
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入修改后的内容"
                                        autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="book-footer">
                            <el-button @click="changeUserFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitChangeUserForm">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!--    删除用户信息  -->
                    <el-button size="mini" type="danger" @click="userDelete(props.$index, props.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    用户信息列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "AdminUsers",
        data(){
            return {
                // 用户列表
                usersData: [],
                // 查询用户
                input:'',
                select:'',
                // 新增用户
                newUserFormVisible:false,
                userForm:{
                    id:'',
                    password:'',
                    email:'',
                    role: ''
                },
                // 修改用户
                changeUserFormVisible:false,
                changeUserForm:{
                    user_id:'',
                    type:'',
                    input:''
                },
                // 用户信息列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            };
        },
        mounted() {
            this.getUsersList()
        },
        methods:{
            // 页面加载时获取数据库中用户列表
            getUsersList(){
                console.log('发送用户信息获取请求！')
                this.$axios.get('/users/list',{
                    params:{
                        role:this.$store.state.user.user_role
                    }
                }).then(res=>{
                    if(res.data.code===200){
                        this.usersData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        console.log(res.data);
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新页面重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            // 搜索用户
            searchUser(){
                this.$axios.get('/users/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:this.select,
                        input:this.input
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.$message({
                            message: '查询用户信息成功！',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '请确认用户信息完整性后重试！',
                            type: 'warning'
                        })
                    }
                    this.usersData = res.data.msg
                    console.log(res.data)
                })
            },
            // 点击新建按键
            newUser(){
                this.newUserFormVisible = true
            },
            // 填写完成，点击确定，发送新增用户请求
            submitUserForm(){
                this.newUserFormVisible = false
                console.log('发送新建用户请求！')
                this.$axios.post('/users/new',{
                    myRole: this.$store.state.user.user_role,
                    id:this.userForm.id,
                    password:this.userForm.password,
                    email:this.userForm.email,
                    role:this.userForm.role
                }).then(res=>{
                    this.userForm.id = ''
                    this.userForm.password = ''
                    this.userForm.email = ''
                    this.userForm.role = ''
                    switch (res.data.code) {
                        case 200:{
                            this.getUsersList()
                            this.$message({
                                message: '新建用户信息成功！',
                                type: 'success'
                            })
                            break;
                        }
                        case 403:{
                            this.$message({
                                message: '权限不足!',
                                type: 'warning'
                            })
                            break;
                        }
                        case 422:{
                            this.$message({
                                message: '信息错误,请重新填写!',
                                type: 'warning'
                            })
                            break;
                        }
                        case 500:{
                            this.$message.error('服务器故障,请联系管理员~~~');
                            break;
                        }
                        default:{
                            this.$message({
                                message: '请刷新页面重试~~~',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 修改用户
            userEdit(index, row) {
                // console.log(index, row);
                this.changeUserForm.user_id = row.user_id
                this.changeUserFormVisible = true
            },
            // 发送修改请求
            submitChangeUserForm(){
                // console.log(this.changeUserForm.user_id,this.changeUserForm.input)
                // 发送post请求,修改用户信息
                console.log('发送修改用户信息请求~~~');
                this.changeUserFormVisible = false
                this.$axios.post('/users/update',{
                    role:this.$store.state.user.user_role,
                    user_id:this.changeUserForm.user_id,
                    type:this.changeUserForm.type,
                    input:this.changeUserForm.input
                }).then(res => {
                    // 重新获取用户列表
                    this.getUsersList()
                    this.changeUserForm.user_id = ''
                    this.changeUserForm.type = ''
                    this.changeUserForm.input = ''
                    switch (res.data.code){
                        case 200 :{
                            this.$message({
                                message: '修改用户信息成功！',
                                type: 'success'
                            })
                            break
                        }
                        case 401:{
                            this.$message({
                                message: '权限不足!',
                                type: 'warning'
                            })
                            break;
                        }
                        case 422:{
                            this.$message({
                                message: '删除的用户不存在,请刷新页面后重试...',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器出现问题,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 删除用户
            userDelete(index, row) {
                // console.log(index, row);
                // 发送post请求(软删除)
                console.log('发送删除用户信息请求')
                this.$axios.post('/users/update',{
                    role:this.$store.state.user.user_role,
                    user_id:row.user_id,
                    type:'user_is_deleted',
                    input:1
                }).then(res => {
                    switch (res.data.code) {
                        case 200:{
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            })
                            // 重新获取图书列表
                            this.getUsersList()
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器出小差了,请联系管理员...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .heading-users{
        margin: 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
